<template>
	<view class="shadow-sm rounded-sm bg-white border border-solid border-gray-200 p-20">
		<view class="flex items-center" v-if="order.goods.length==1"
			@click="$hd.redirect(`/pages/order-show/order-show`,{id:order.id})">
			<view class="flex items-center flex-1">
				<u-avatar :src="order.goods[0].preview" mode="square" class="mr-20" size="large"></u-avatar>
				{{order.goods[0].title}}
			</view>
			<view class="">
				{{order.price}} 元
			</view>
		</view>

		<view class="flex items-center" v-else>
			<scroll-view scroll-x="true" class="w-70-s">
				<view class="flex-1 flex">
					<view v-for="goods in order.goods" :key="goods.id" class="mr-20"
					@click="$hd.redirect(`/pages/order-show/order-show`,{id:order.id})">
						<u-avatar :src="goods.preview" mode="square" class="mr-20" size="large"></u-avatar>
					</view>
					<!-- <view v-for="goods in order.goods" :key="goods.id" class="mr-20">
						<u-avatar :src="goods.preview" mode="square" class="mr-20" size="large"></u-avatar>
					</view>
					<view v-for="goods in order.goods" :key="goods.id" class="mr-20">
						<u-avatar :src="goods.preview" mode="square" class="mr-20" size="large"></u-avatar>
					</view>
					<view v-for="goods in order.goods" :key="goods.id" class="mr-20">
						<u-avatar :src="goods.preview" mode="square" class="mr-20" size="large"></u-avatar>
					</view> -->
				</view>
			</scroll-view>
			<view class="w-30-s ml-20 flex justify-end">
				{{order.price}} 元
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['order'],
	}
</script>

<style>
</style>
